<template>
	<div class="h-full flex flex-col">
		<div style="height: 70px">
			<div
				style="
					position: fixed;
					z-index: 1000;
					background: #f0f2f5;
					width: 100%;
					height: 73px;
				"
			>
				<!-- <div class="Title">{{ $t(`Uportal`) }}</div> -->
				<div class="Title1" style="font-size: 18px; margin-top: 10px">
					<span>Dear</span>
					{{ userdata.YtAdminUserAliasCH }},
					<br />
					<div style="margin-top: 6px">{{ $t(`Upor1`) }}</div>
				</div>
				<div class="Title2">
					<!-- <div style="line-height: 30px">
					{{ $t(`Upor2`) }}
				</div> -->
					<!-- <div style="line-height: 30px">
					{{ $t(`Upor3`) }}
				</div>
				<div style="line-height: 30px">
					{{ $t(`Upor4`) }}
				</div> -->
				</div>
			</div>
		</div>
		<div class="card" v-if="Pa">
			<div class="card_le"></div>
			<div class="card_ri" v-for="(card, index) in cardList" :key="index">
				<div class="Dpia">DPIA</div>
				<div style="width: 100%">
					<P
						class="TotaNua"
						@click="shlist('all')"
						style="cursor: pointer"
						>{{ card.Totals }}</P
					>
					<P class="Tota">{{
						$t(`user.verification-code.required111566110577366`)
					}}</P>
				</div>
				<div class="Dra">
					<div style="text-align: center">
						<div class="Foos" @click="shlist(1)">
							{{ card.Draft }}
						</div>
						<div>
							{{
								$t(
									`user.verification-code.required111566110577368`
								)
							}}
						</div>
					</div>
					<div style="text-align: center">
						<div class="Foos" @click="shlist(2)">
							{{ card.Submitted }}
						</div>
						<div>
							{{ $t(`submitted`) }}
						</div>
					</div>
					<div style="text-align: center">
						<div class="Foos" @click="shlist(3)">
							{{ card.InProgress }}
						</div>
						<div>
							{{ $t(`user.verification-code.required111566145`) }}
							<!-- Under <br />
							Review -->
						</div>
					</div>

					<div style="text-align: center">
						<div class="Foos" @click="shlist(6)">
							{{ card.Return }}
						</div>
						<div>{{ $t(`Returned`) }}</div>
					</div>
					<div style="text-align: center">
						<div class="Foos" @click="shlist(5)">
							{{ card.Stop }}
						</div>
						<div>
							{{
								$t(`user.verification-code.required11156614611`)
							}}
						</div>
					</div>
					<div style="text-align: center">
						<div class="Foos" @click="shlist(4)">
							{{ card.Completed }}
						</div>
						<div>
							{{ $t(`user.verification-code.required111566146`) }}
						</div>
					</div>
				</div>
				<div style="text-align: center">
					<a-button
						type="primary"
						@click="showModal()"
						style="margin: 23px auto; width: 40%"
						>{{ $t('REQUEST') }}<a-icon type="arrow-right"
					/></a-button>
				</div>
			</div>
		</div>
		<!-- 列表 -->
		<!-- v-if="pagination.total > 0" -->
		<div style="font-size: 24px; font-weight: 500">
			{{ $t(`portal.all`) }}
		</div>
		<a-card class="mt-[10px]">
			<div class="Pa" @click="showPa()"></div>
			<div style="display: flex; margin-bottom: 20px">
				<a-button
					type="link"
					:class="current == 1 ? 'active' : ''"
					class="button-text"
					@click="callback(1, '')"
				>
					{{ $t('portal.Yw') }}
					(<span>
						{{ this.pagination.total }} </span
					>)
				</a-button>
				<a-button
					v-if="Totaldata > 0"
					type="link"
					:class="current == 2 ? 'active' : ''"
					class="button-text"
					@click="callback(2, '')"
				>
					{{ $t('portal.Rw') }}
					(<span>
						{{ Totaldata }} </span
					>)
				</a-button>
			</div>
           
			<!-- <a-menu  v-model="current"  mode="horizontal" @click="callback" style="margin-bottom: 20px;">
				<a-menu-item key="1">
                 {{$t('portal.Yw')}}
                 (<span>
                    {{ this.pagination.total }}
                 </span>
                 )
					
				</a-menu-item>
				<a-menu-item key="2" v-if="Totaldata > 0">
                    {{$t('portal.Rw')}}
                    (<span>
                        {{ Totaldata }}
                    </span>)
				</a-menu-item>
			</a-menu> -->
			<a-table
				v-if="keys == 1"
				ref="table"
				size="middle"
				class="h-full overflow-x-auto"
				:dataSource="listData"
				:pagination="false"
				:loading="listLoading"
				:customRow="rowClick"
				@change="tableChange"
				:rowKey="(record) => record.Id"
				@expand="getRiskList"
				:expanded-row-keys.sync="expandedRowKeys"
			>
                <!-- :slot="precord.DpiaStatus == 1 ? 'expandedRowRender' : ''" -->
				<template
					slot-scope="precord, text"
                    slot="expandedRowRender"
				>
					<a-table
                        v-if="precord.DpiaStatus == 4"
						:pagination="false"
						size="middle"
						style="margin-top: 20px"
						class="h-full overflow-x-auto"
						:dataSource="riskList"
						:rowKey="(record) => record.Id"
					>
						<!-- Action Name -->
						<a-table-column
							key="DpiaActionName"
							width="250px"
							:customRender="
								(_, record) => {
									return (
										record.DpiaActionName ||
										record.DpiaActionIdTag
									)
								}
							"
						>
							<span slot="title">{{
								$t('user.verification-code.required111566166')
							}}</span>
						</a-table-column>
						<!-- Source -->
						<a-table-column
							key="DpiaActionSource"
							data-index="DpiaActionSource"
							width="150"
						>
							<span slot="title">{{
								$t('user.verification-code.required111566167')
							}}</span>
						</a-table-column>
						<!-- Action Result -->
						<a-table-column
							key="DpiaActionResult"
							data-index="DpiaActionResult"
							width="120"
						>
							<span slot="title">{{
								$t(
									'user.verification-code.required1115661688888'
								)
							}}</span>
						</a-table-column>
						<!-- Action Owner -->
						<a-table-column
							key="DpiaActionUserResponsible"
							data-index="DpiaActionUserResponsible"
							width="120"
						>
							<span slot="title">{{
								$t(
									'user.verification-code.required1115661281111'
								)
							}}</span>
						</a-table-column>
						<!-- Creation Time -->
						<a-table-column
							key="DpiaActionCreatetime"
							data-index="DpiaActionCreatetime"
							width="150"
						>
							<span slot="title">{{
								$t('user.verification-code.required111566169')
							}}</span>
						</a-table-column>
						<!-- Due Date -->
						<a-table-column
							key="DpiaActionFinishTime"
							data-index="DpiaActionFinishTime"
							width="150"
						>
							<span slot="title">{{
								$t('user.verification-code.required111566170')
							}}</span>
						</a-table-column>
						<!-- 状态 -->
						<a-table-column
							key="DpiaActionStatus"
							:title="
								$t(
									'user.login.message-invalid-verification-code0011'
								)
							"
						>
							<template slot-scope="text, record">
								<span>
									<div v-if="record.DpiaActionStatus == 1">
										<a-badge color="blue" />
										{{
											$t(
												'user.verification-code.required111566133'
											)
										}}
									</div>
									<div
										v-else-if="record.DpiaActionStatus == 3"
									>
										<a-badge color="purple" />
										{{
											$t(
												'user.verification-code.required1115661455555'
											)
										}}
									</div>
									<div
										v-else-if="record.DpiaActionStatus == 4"
									>
										<a-badge color="green" />
										{{
											$t(
												'user.verification-code.required111566146'
											)
										}}
									</div>
									<div
										v-else-if="record.DpiaActionStatus == 5"
									>
										<a-badge color="grey" />
										{{
											$t(
												'user.verification-code.required111566110577371442281431222335566555555'
											)
										}}
									</div>
								</span>
							</template>
						</a-table-column>
						<a-table-column
							key="action"
							:title="$t('app.setting.othersettings')"
							style="margin-left: -15px"
						>
							<template slot-scope="text, record">
								<span>
									<a-space size="0">
										<a-button
											type="link"
											@click="
												showModalAction(
													'1',
													record.Id,
													record.state,
													record
												)
											"
											block
										>
											<!-- v-if="
												((precord.DpiaDcoUserId ===
													userId ||
													precord.RiskOwnerUserId ===
														userId) &&
													(precord.DpiaStatus === 4 ||
														precord.DpiaStatus ===
															2 ||
														precord.DpiaStatus ===
															3 ||
														precord.RiskState ===
															3)) ||
												(precord.DpiaDcoUserId !==
													userId &&
													precord.RiskOwnerUserId !==
														userId &&
													record.DpiaActionUserId ===
														userId &&
													precord.DpiaStatus === 4)
											" -->
											{{
												$t(
													'user.verification-code.required111566147'
												)
											}}</a-button
										>
										<!-- <a-popconfirm
											:title="
												$t(
													'user.verification-code.required111566110577225'
												)
											"
											:ok-text="
												$t(
													'user.verification-code.required1166'
												)
											"
											:cancel-text="
												$t('user.email.required11')
											"
											@confirm="delActions(record.Id)"
										> -->
										<!-- v-if="
												precord.DpiaDcoUserId &&
												(precord.DpiaDcoUserId ===
													userId ||
													precord.DpiaDcoUserId ===
														RiskOwnerUserId) &&
												(precord.DpiaStatus === 2 ||
													precord.DpiaStatus === 3 ||
													precord.RiskState === 2 ||
													precord.RiskState === 3)
											" -->
										<!-- <a-button
												type="link"
												v-if="!bianjike"
												>{{
													$t('menu.exception.trigger')
												}}</a-button
											>
										</a-popconfirm> -->
									</a-space>
								</span>
							</template>
						</a-table-column>
					</a-table>
				</template>
				<!--Type----------------------->
				<a-table-column
					key="type"
					data-index="type"
					width="130px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(1)
						}
					"
				>
					<span slot="title">{{
						$t('dco.portal.table.column1')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect1"
							:filter-data="filterData"
							:single-search="false"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span>{{ record.DpiaId }}</span>
					</template>
				</a-table-column>
				<!-- Name------------------- -->
				<a-table-column
					key="DpiaName"
					data-index="DpiaName"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(2)
						}
					"
					width="200px"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required11156611033')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect2"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaName
						}}</span>
					</template>
				</a-table-column>
				<!-- RPA_ID------------------- -->
				<a-table-column
					key="RpaId"
					data-index="RpaId"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(6)
						}
					"
				>
					<span slot="title">{{
						$t('dco.portal.table.column4')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect4"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="record">
						<rpaDetail :rpaDetailId="record" />
					</template>
				</a-table-column>
				<!-- DCO -->
				<a-table-column
					key="DpiaDco"
					width="120px"
					data-index="DpiaDco"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(7)
						}
					"
				>
					<span slot="title" class="min-w-90p">DCO</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect7"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{ record.DpiaDco }}</span>
					</template>
				</a-table-column>
				<!-- 发起人 -->
				<a-table-column
					key="TaskCreator"
					data-index="TaskCreator"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(5)
						}
					"
				>
					<span slot="title">{{
						$t('menu.form.advanced.creator')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect7"
							:single-search="false"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaCreateUser
						}}</span>
					</template>
				</a-table-column>
				<!-- 状态------------------------->
				<a-table-column
					key="DpiaStatus"
					data-index="DpiaStatus"
					width="140px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(9)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('app.setting.content-width.fluid')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="ç"
							:single-search="false"
							:filter-data="filterData"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
							@searchFilter="searchQueryFilter"
						/>
					</span>
					<template slot-scope="text, record">
						<a-popover>
							<template slot="content">
								<a-timeline>
									<a-timeline-item
										v-for="item in caogao"
										:key="item.value"
										:class="{
											'timeline-item-green':
												item.value < record.DpiaStatus,
											'timeline-item-red':
												item.value == record.DpiaStatus,
											'timeline-item-gray':
												item.value > record.DpiaStatus,
										}"
									>
										{{ $t(item.label) }}
									</a-timeline-item>
								</a-timeline>
							</template>
							<a-button style="border: none">
								<div v-if="record.DpiaStatus == 1">
									<div v-if="record.DpiaStageStatus == 0">
										<a-badge color="blue" />
										{{
											$t(
												'user.verification-code.required111566133'
											)
										}}
									</div>
									<div v-else>
										<a-badge color="blue" />
										{{
											$t(
												'user.verification-code.required111566133.returned'
											)
										}}
									</div>
								</div>
								<div v-else-if="record.DpiaStatus == 2">
									<a-badge color="orange" />
									{{
										$t(
											'user.verification-code.required1115661444444'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 3">
									<a-badge color="purple" />
									{{
										$t(
											'user.verification-code.required1115661105716'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 4">
									<a-badge color="green" />
									{{
										$t(
											'user.verification-code.required111566146'
										)
									}}
								</div>
								<div v-else-if="record.DpiaStatus == 5">
									<a-badge color="red" />
									{{
										$t(
											'user.verification-code.required11156614611'
										)
									}}
								</div>
							</a-button>
						</a-popover>
					</template>
				</a-table-column>
				<!-- 创建时间------------------ -->
				<a-table-column
					key="DpiaCreatetime"
					data-index="DpiaCreatetime"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(8)
						}
					"
				>
					<span slot="title" class="min-w-90p">{{
						$t('user.verification-code.required1115661311111')
					}}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect8"
							:single-search="false"
							:filter-data="filterData"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaCreatetime
						}}</span>
					</template>
				</a-table-column>
				<!-- 更新时间------------------ -->
				<a-table-column
					key="DpiaUpdatetime"
					data-index="Updatetime"
					width="120px"
					@filterDropdownVisibleChange="
						(e) => {
							if (e) this.setValus(11)
						}
					"
				>
					<span slot="title">{{ $t('menu.list.basic-list') }}</span>
					<span
						slot="filterDropdown"
						slot-scope="{
							setSelectedKeys,
							selectedKeys,
							confirm,
							clearFilters,
							column,
						}"
					>
						<table-select
							ref="tableselect6"
							:single-search="false"
							:filter-data="filterData"
							@searchCommit="searchQuery"
							@searchFilter="searchQueryFilter"
							@searchClose="confirm"
							@searchClean="tableCleanJobs"
						/>
					</span>
					<template slot-scope="text, record">
						<span style="display: block">{{
							record.DpiaUpdatetime
						}}</span>
					</template>
				</a-table-column>
				<a-table-column
					key="action"
					:title="$t('menu.exception.not-find')"
					width="80px"
				>
					<template slot-scope="record">
						<span>
							<a-dropdown>
								<a-button type="link">
									<a-icon type="more" />
								</a-button>
								<template #overlay>
									<!-- -->
									<a-menu v-if="record.DpiaStatus != 5">
										<a-menu-item
											v-if="record.RpaState === 'Draft'"
											@click="edits(record, 'edit')"
										>
											<!-- 修改按钮 -->
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661477'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 去答题按钮 -->
										<a-menu-item
											v-if="
												record.DpiaStatus === 1 &&
												record.RpaState != 'Draft' &&
												(record.Role.CREATE == 1 ||
													record.Role.WRITE == 1 ||
													record.Role.VIEW == 1)
											"
											@click="edit(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105717'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 删除按钮 -->
										<a-menu-item
											v-if="
												record.DpiaStatus === 1 &&
												record.Role.CREATE == 1
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required111566110577225'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="() => del(record.Id)"
											>
												<a-button
													type="link"
													style="
														width: 100%;
														text-align: left;
													"
													>{{
														$t(
															'menu.exception.trigger'
														)
													}}</a-button
												>
											</a-popconfirm>
										</a-menu-item>
										<!-- 撤回 -->
										<a-menu-item
											v-if="
												record.IsDcoState == 0 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus == 2 &&
												(record.DpiaChangeDcoId !=
													$store.state.user.info
														.YtId ||
													record.DpiaChangeDcoId ==
														'')
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required11156611057737144228'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166888'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="
													() => withdraw(record)
												"
											>
												<a-button
													style="
														width: 100%;
														text-align: left;
													"
													type="link"
													>{{
														$t(
															'user.verification-code.required11156611057737144227'
														)
													}}</a-button
												>
											</a-popconfirm>
										</a-menu-item>
										<!-- 下载 -->
										<a-menu-item
											v-if="
												record.Reports === 1 &&
												record.RpaIfCompletedPIA ===
													0 &&
												record.RpaNoPIOrImportantInvolved ==
													0 &&
												(record.DpiaChangeDcoId !=
													$store.state.user.info
														.YtId ||
													record.DpiaChangeDcoId ==
														'')
											"
										>
											<a-button
												type="link"
												@click="xiazai(record)"
												>{{
													$t(
														'user.verification-code.required1115661105715'
													)
												}}</a-button
											>
										</a-menu-item>
										<!-- 查看 -->
										<a-menu-item
											v-if="
												(isLable === 1 &&
													(record.DpiaStatus === 2 ||
														record.DpiaStatus ===
															3)) ||
												(isLable === 0 &&
													record.DpiaStatus === 2)
											"
											@click="review(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105718'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 评估 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 2 &&
													record.ReviewStatus ===
														1) ||
												record.Role.CHANGE
											"
											@click="estimate(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105719'
												)
											}}</a-button>
										</a-menu-item>
										<!-- 整体评估 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 3 &&
													record.Role.DCO == 1 &&
													(record.DpiaChangeDcoId !=
														$store.state.user.info
															.YtId ||
														record.DpiaChangeDcoId ==
															'')) ||
												record.Reports === 1
											"
											@click="
												record.DpiaStatus === 3
													? overall(
															record,
															'allReview'
													  )
													: overall(record, 'see')
											"
										>
											<a-button type="link">{{
												record.DpiaStatus === 3
													? $t(
															'user.verification-code.required1115661105720'
													  )
													: $t(
															'user.verification-code.required1115661105718'
													  )
											}}</a-button>
										</a-menu-item>
										<!-- 终止 -->
										<a-menu-item
											v-if="
												(record.DpiaStatus === 2 ||
													record.DpiaStatus === 3) &&
												record.Role.CREATE == 1
											"
										>
											<a-popconfirm
												:title="
													$t(
														'user.verification-code.required111566110577314'
													)
												"
												:ok-text="
													$t(
														'user.verification-code.required1166'
													)
												"
												:cancel-text="
													$t('user.email.required11')
												"
												@confirm="() => stop(record)"
											>
												<a-button type="link">{{
													$t(
														'user.verification-code.required1115661105721'
													)
												}}</a-button>
											</a-popconfirm>
										</a-menu-item>
										<!-- 多人答题 -->
										<!-- <a-menu-item
											v-if="
												record.DpiaStatus != 5 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus === 1 &&
												record.RpaIfCompletedPIA == 0 &&
												record.RpaNoPIOrImportantInvolved ==
													0
											"
											@click="
												showPermissions(record, 'write')
											"
										>
											<a-button type="link">
												{{ $t('user.v17') }}
											</a-button>
										</a-menu-item> -->
										<!-- 共享权限 -->
										<!-- <a-menu-item
											v-if="
												record.DpiaStatus != 5 &&
												record.Role.CREATE == 1 &&
												record.DpiaStatus != 1
											"
											@click="showPermissions(record)"
										>
											<a-button type="link">{{
												$t(
													'user.verification-code.required1115661105722'
												)
											}}</a-button>
										</a-menu-item> -->
									</a-menu>
								</template>
							</a-dropdown>
						</span>
					</template>
				</a-table-column>
			</a-table>
			<!-- 分页 -->
			<a-pagination
				v-if="keys == 1"
				size="small"
				v-model="pagination.current"
				:total="pagination.total"
				hideOnSinglePage
				:pageSize.sync="pagination.pageSize"
				@change="getList()"
			/>
			<Tasks :activekey="keys" v-if="keys == 2" />
		</a-card>
		<a-drawer
			title="Basic Drawer"
			placement="right"
			:closable="false"
			:visible="Gen"
			width="80%"
			@close="onClose"
		>
			<Question
				ref="addappid"
				:dpiaid="dpiaid"
				:state="dpiastate"
				:itLang="itLang"
			>
			</Question>
		</a-drawer>
		<a-drawer
			title="Basic Drawer"
			placement="right"
			:closable="false"
			:visible="reviews"
			width="80%"
			@close="onCloseRe"
		>
			<Estimate
				ref="addappid"
				:dpiaid="dpiaid"
				:state="dpiastate"
				:itLang="itLang"
			>
			</Estimate>
		</a-drawer>
		<creatRiskAction
			:mode="mode"
			:riskId="riskId"
			:editId="editId"
			ref="creatRiskAction"
			@getList="getList"
			@succeed="succeed"
		>
		</creatRiskAction>
	</div>
</template>

<script>
import tableSelect from '@/components/tableSelect/tableSelect.vue'
import form from '@/locales/lang/zh-CN/form'
import { getUserInfo } from '@/api/index'
import Grading from './rpa/grading.vue'
import {
	dpiaChangeState,
	dpiaDelete,
	DpiaDownload,
	dpiaGroup,
	allDpiaGroup,
	DpiaList,
	dpiaLists,
	dpiaAllLists,
	dpiaQuestionsCreate,
	dpiahistoryLists,
	dpiaStatistical,
	dpiaWithdraw,
	isWithdraw,
	PortalallAction,
	rickActiondel,
	dpiaSimpleAction,
	Porstatisticsum,
} from '@/api/dpia/form'
import {
	riskDetail,
	RISKEditActionList,
	ristCreateAction,
	ristDelAction,
	taskSelect,
} from '@/api/risk/form'
import { taskListNew } from '@/api/ytdg'
import { dcoGroup } from '@/api/dco'
import Question from './dpia/questionnairePortal.vue'
import Estimate from './dpia/estimate.vue'
import Tasks from './MyTasks/index.vue'
import creatRiskAction from './MyTasks/creatRiskAction.vue'
import createRisk from '../risk/components/createRisk.vue'
import RpaDetail from './rpa/rpaDetails.vue'
import { Calendar as ACalendar } from 'ant-design-vue';
import { riskLists } from '@/api/risk/form'
import moment from 'moment';
export default {
	name: 'myPortal',
	components: {
		Question,
		Estimate,
		tableSelect,
		Grading,
		Tasks,
		creatRiskAction,
		createRisk,
		RpaDetail,
         'a-calendar': ACalendar,
	},
	data() {
		return {
			listData: [],
			cardList: [],
			queryForm: {
				QuerySource: 'Portal',
			},
			queryFormTy: {
				// page: 1, //当前页
				// pageSize: 10,
				Name: undefined,
				types: 2,
				taskType: undefined,
				Owner: undefined,
				TaskState: undefined,
			},
			pagination: {
				current: 1, //当前页
				pageSize: 10, //每页条数
				total: 0, //总条数
				showQuickJumper: true,
				hideOnSinglePage: true,
			},
			listData: [],
			caogao: [
				{
					label: 'user.verification-code.required111566133.dco',
					value: 1,
				},
				{
					label: 'user.verification-code.required1115661444444',
					value: 2,
				},
				{
					label: 'user.verification-code.required1115661105716',
					value: 3,
				},
				{ label: 'user.verification-code.required111566146', value: 4 },
				{
					label: 'user.verification-code.required11156614611',
					value: 5,
				},
			],
			TYpe: [
				{ label: 'user.verification-code.required111566133', value: 1 },
				{
					label: 'user.verification-code.required1115661444444',
					value: 2,
				},
				{
					label: 'user.verification-code.required1115661105716',
					value: 3,
				},
				{ label: 'user.verification-code.required111566146', value: 4 },
				{
					label: 'user.verification-code.required11156614611',
					value: 5,
				},
			],
			Pa: true,
			// 暂时存用户数据
			userdata: {},
			//dpia
			Gen: false,
			dpiaid: '',
			dpiastate: 'see',
			itLang: '',
			isLable: 0,
			//查看
			reviews: false,
			//评估
			Estimates: false,
			customRowIndex: -1,
			DpiaStatus: '',
			listLoading: true,
			//搜索筛选合并
			setValusKey: '',
			filterData: [],
			kvMap: [
				'',
				'Type',
				'DpiaName',
				'',
				'DpiaDepartment',
				'DpiaCreateUser',
				'RpaIdStr',
				'DpiaDco',
				'DpiaCreatetime',
				'DpiaStatus',
				'DpiaReferenceId',
				'DpiaUpdatetime',
				'',
				'Condition',
			],
			okyMap: [
				'',
				'DpiaIdStr',
				'DpiaNameStr',
				'DpiaDataControllerStr',
				'',
				'',
				'RpaIdStr',
				'',
				'',
				'DpiaStatusStr',
				'DpiaReferenceId',
			],
			//子类
			expandedRowKeys: [], // 扩展行的行键列表
			riskList: [],
			expanded1: '',
			paginationActio: {
				page: 1, //当前页
				pageSize: 1000, //每页条数
				total: 0, //总条数
			},
			keys: '1',
			TotalYw: 0,
			TotalTr: 0,
			Totaldata: 0,
			//弹框
			mode: '',
			riskId: 0,
			editId: 0,
			tabTotal: {
				0: 0,
				1: 0,
				2: 0,
			},
			current: 1,
            value: moment('2017-01-25'),
            selectedValue: moment('2017-01-25'),
            value1: moment('2017-01-25'),
		}
	},

	created() {
		this.init()
		this.getinfo()
	},
	mounted() {
		const nowLang = localStorage.getItem('lang').includes('zh-EN')
		if (nowLang) {
			this.lang = 'zh-EN'
		} else {
			this.lang = 'zh-CN'
		}
		window.addEventListener('setItemEvent', (e) => {
			if (e.key == 'lang') {
				this.lang = JSON.parse(e.value)
			}
		})
	},
	methods: {
        onSelect(value) {
            this.value = value;
            this.selectedValue = value;
        },
        onPanelChange(value) {
            this.value = value;
        },

		// 查询Filter逻辑
		async setValus(typeId) {
			// console.log('typeId',typeId);
			this.listLoading = true
			try {
				if (typeId == 16) {
					const { data } = await taskSelect({
						Types: 6,
						types: 3,
					})
					// 调用查询列表

					for (let j = 0; j < data.length; j++) {
						if (typeId === 5) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required111566110577371442281431222335566555555'
									)}/${this.$t(
										'user.verification-code.required1115661222222'
									)}`
									break
								default:
									break
							}
						} else {
							data[j].text = data[j].value
						}
					}
					this.setValusKey = typeId
					this.filterData = data
				} else if (typeId == 17) {
					const { data } = await taskSelect({
						Types: 7,
						types: 3,
					})
					// 调用查询列表

					for (let j = 0; j < data.length; j++) {
						if (typeId === 5) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required111566110577371442281431222335566555555'
									)}/${this.$t(
										'user.verification-code.required1115661222222'
									)}`
									break
								default:
									break
							}
						} else {
							data[j].text = data[j].value
						}
					}
					this.setValusKey = typeId
					this.filterData = data
				} else if (typeId == 111) {
					const { data } = await dcoGroup({
						Condition: typeId,
						userType: 1,
					})
					// 调用查询列表

					for (let j = 0; j < data.length; j++) {
						if (typeId === 5) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required111566110577371442281431222335566555555'
									)}/${this.$t(
										'user.verification-code.required1115661222222'
									)}`
									break
								default:
									break
							}
						} else {
							data[j].text = data[j].value
						}
					}
					this.setValusKey = typeId
					this.filterData = data
				} else {
					// 调用查询列表
					const { data } = await dpiaGroup({
						Condition: typeId,
						QuerySource: 'Portal',
					})
					// console.log('data0',data);
					// 赋值类型，用于筛选、搜索的直接调用
					// 为了使中文状态下还是中文
					for (let j = 0; j < data.length; j++) {
						if (typeId === 9) {
							switch (data[j].value) {
								case 1:
									data[j].text = this.$t(
										'user.verification-code.required111566133'
									)
									break
								case 2:
									data[j].text = this.$t(
										'user.verification-code.required1115661444444'
									)
									break
								case 3:
									data[j].text = this.$t(
										'user.verification-code.required111566145'
									)
									break
								case 4:
									data[j].text = this.$t(
										'user.verification-code.required111566146'
									)
									break
								case 5:
									data[j].text = `${this.$t(
										'user.verification-code.required11156611057737144228143122233556655'
									)}`
									break
								default:
									break
							}
						}
					}
					this.setValusKey = typeId
					// if (typeId === 9) {
					//   for (let i = 0; i < data.length; i++) {
					//     data[i].text = data[i].textEn
					//   }
					// }
					// 决定中文状态下是英文
					// 赋值筛选的列表，直接赋值
					this.filterData = data
				}
			} catch (error) {
				// 报错信2
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		/**
		 * 清空查询数据，并且执行查询
		 * @returns {Promise<void>}
		 */
		async tableCleanJobs(type) {
			console.log(type)
			this.pagination.page = 1
			if (type === 'part') {
				this.queryForm[this.kvMap[this.setValusKey]] = undefined
				this.queryForm[this.okyMap[this.setValusKey]] = undefined
			} else {
				this.queryForm = {
					QuerySource: 'Portal',
				}
				for (let i = 1; i <= 8; i++) {
					let dom = this.$refs[`tableselect${i}`]
					if (dom) {
						dom.inputValue = ''
						dom.inputCheckValue = []
					}
				}
			}
			this.inputValue = ''
			if (this.isLable === 0) {
				await this.getList()
			} else if (this.isLable === 1) {
				await this.getAllList()
			}
		},

		/**
		 * 列表搜索查询
		 * @param e 搜索的值
		 * @returns {Promise<void>}
		 */
		async searchQuery(e) {
			console.log(
				'this.kvMap[this.setValusKey]',
				this.kvMap[this.setValusKey]
			)
			this.queryForm[this.kvMap[this.setValusKey]] = undefined
			this.queryForm = {
				...this.queryForm,
				[this.okyMap[this.setValusKey]]: e,
			}
			if (this.isLable === 0) {
				await this.getList('filter')
				this.queryForm = { QuerySource: 'Portal' }
			} else if (this.isLable === 1) {
				await this.getAllList('filter')
				this.queryForm = { QuerySource: 'Portal' }
			}
		},

		/**
		 * 列表筛选查询
		 * @param e 筛选的值
		 * @returns {Promise<void>}
		 */
		async searchQueryFilter(e) {
			this.queryForm[this.okyMap[this.setValusKey]] = undefined
			console.log('this.okyMap', this.setValusKey)
			this.queryForm = {
				...this.queryForm,
				[this.kvMap[this.setValusKey]]:
					this.setValusKey === 2 ? e.replaceAll('/', '#@%$') : e,
			}
			if (this.isLable === 0) {
				await this.getList('filter')
			} else if (this.isLable === 1) {
				await this.getAllList('filter')
			}
		},

		async shlist(type) {
			this.current = 1
			this.keys = 1
			this.listLoading = true
			if (type == 'all') {
				this.tableCleanJobs(type)
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			} else {
				this.queryForm = {
					...this.queryForm,
					DpiaStatus: type,
				}
				const { data } = await dpiaLists({
					...{ page: 1, pageSize: 10 },
					...this.queryForm,
				})

				console.log('async getList1', this.queryForm)
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data

				// 给table赋值
				this.listData = Lists || []

				// 给分页数据赋值
				this.pagination = {
					current: Page,
					pageSize: PageSize,
					total: Total,
				}
				// this.listLoading = false
				setTimeout(() => {
					this.listLoading = false
				}, 600)
			}
		},
		onClose() {
			this.dpiaid = ''
			this.Gen = false
		},
		onCloseRe() {
			this.dpiaid = ''
			this.reviews = false
		},
		showModal() {
			this.$router.push({
				path: '/Portal/detail',
				query: {},
			})
		},
		showPa() {
			if (this.Pa) {
				this.Pa = false
			} else {
				this.Pa = true
			}
		},
		// 存储数据
		async getinfo() {
			//获取用户信息
			const { data } = await getUserInfo()
			// 获取用户列表下拉
			// 存储数据到sessionStorage
			// sessionStorage.setItem("userinfo", JSON.stringify(data));
			this.userdata = data
			// console.log(data);
		},
		async init() {
			if (localStorage.getItem('lang') == '"zh-CN"') {
				this.itLang = true
			} else if (localStorage.getItem('lang') == '"zh-EN"') {
				this.itLang = false
			}
			try {
				// 获取统计数据
				const { data } = await dpiaStatistical({
					QuerySource: 'Portal',
				})
				console.log(data)
				this.cardList = data
			} catch (error) {
				console.log('[rpa.headers]报错内容: ', error)
				this.$message.error(error)
			}
			// 调用查询列表
			try {
				// const { data } = await Porstatisticsum({})
				const { data } = await riskLists({ pageType: 2 })
				console.log('1231231', data)
				// 获取用户列表下拉
				//  const { data: userList1 } = await userQuery(1);
				//     this.userList1 = userList1
				// console.log('data3456', data);
				// 解构赋值
				this.Totaldata = data.Total
				this.TotalTr = this.$t('portal.Rw') + '(' + data + ')'
			} catch (error) {
				console.log('[rpa.headers]报错内容: ', error)
				this.$message.error(error)
			}
			this.getList()
		},
		async getList(state) {
			this.listData = []
			this.listLoading = true
			const { current, pageSize } = this.pagination
			try {
				if (state == 'filter') {
					// 调用查询列表
					const { data } = await dpiaLists({
						...{ page: 1, pageSize: 10 },
						...this.queryForm,
					})

					console.log('async getList1', this.queryForm)
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					this.TotalYw = this.$t('portal.Yw') + '(' + Total + ')'
					// 给table赋值
					this.listData = Lists || []

					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				} else {
					// 调用查询列表
					const { data } = await dpiaLists({
						...{ page: current, pageSize },
						...this.queryForm,
					})
					// 解构赋值
					const { Page, PageSize, Total, Lists } = data
					this.TotalYw = this.$t('portal.Yw') + '(' + Total + ')'
					// 给table赋值
					this.listData = Lists || []
					// 给分页数据赋值
					this.pagination = {
						current: Page,
						pageSize: PageSize,
						total: Total,
					}
				}
			} catch (error) {
				// 报错信息
				this.$message.error(error)
				console.log(error)
			} finally {
				// 不管成功失败都会执行
				this.listLoading = false
			}
		},
		rowClick(record, index) {
			const vm = this
			return {
				on: {
					mouseenter() {
						vm.customRowIndex = index
					},
					mouseleave() {
						vm.customRowIndex = -1
					},
				},
			}
		},
		// 修改rpa
		edits(record, see) {
			this.$router.push({
				path: '/Portal/detail',
				query: {
					id: record.RpaIndexId,
					DpiaRpaId: record.DpiaRpaId,
					DpiaName: record.DpiaName,
					DpiaModelId: record.DpiaModelId,
					DpiaModelName: record.DpiaModelName,
					state: see,
					dpia: record.Id,
				},
			})
		},
		// 去答题
		edit(record) {
			this.$router.push({
				path: '/Portal/dpia/questionnairePortal',
				query: {
					id: record.Id,
					DpiaRpaId: record.RpaIndexId,
					DpiaName: record.DpiaName,
					DpiaModelId: record.DpiaModelId,
					DpiaModelName: record.DpiaModelName,
				},
			})
			// console.log('===> ', record.Id)
			// this.dpiaid = record.Id
			// this.Gen = true
		},
		review(record) {
			// 答题后的查看
			console.log(78)
			this.$router.push({
				path: '/Portal/dpia/review',
				query: { id: record.Id },
			})
		},
		/**
		 * 删除 通用的
		 * @param {*} key
		 */
		async del(id) {
			try {
				// 传过来的id直接请求删除api
				await dpiaDelete({ Id: id })
				this.$message.success(
					this.$t('user.verification-code.required111566110577210')
				)
				// 重新初始化列表刷新数据
				this.init()
			} catch (error) {
				this.$message.error(error)
			} finally {
			}
		},
		//撤回
		async withdraw(e) {
			try {
				console.log(e)
				await dpiaWithdraw({ Id: e.Id })
				this.init()
			} catch (err) {
				this.$message.error(err)
				console.log(err)
			}
		},
		//报告列表
		async xiazai(record) {
			const { data } = await DpiaList({ Id: record.Id })
			const urls = data.Lists.map((item) => item.DpiaReportAddress)
			if (this.lang === 'zh-EN') {
				const enUrls = urls.filter((url) => url.includes('en'))
				sessionStorage.setItem('report', enUrls)
				this.$router.push({
					path: '/Portal/dpia/report',
				})
			} else {
				const cnUrls = urls.filter((url) => !url.includes('en'))
				sessionStorage.setItem('report', cnUrls)
				this.$router.push({
					path: '/Portal/dpia/report',
				})
			}
		},
		// 整体评估
		overall(record, state) {
			this.$router.push({
				path: '/Portal/dpia/overall',
				// query: { ...record, id: record.Id },
				query: { id: record.Id, state: state, isLable: this.isLable },
			})
		},
		// 评估
		async estimate(record) {
			const res = await isWithdraw({ Id: record.Id })
			console.log(res)
			if (res.data == 0) {
				this.$message.error('不可评估')
				return
			}
			// DCO评估
			this.$router.push({
				path: '/Portal/dpia/estimate',
				query: {
					...record,
					id: record.Id,
					DpiaCreateUserId: record.DpiaCreateUserId,
					DpiaChangeDcoId: record.DpiaChangeDcoId || '',
					DpiaReferenceId: record.DpiaReferenceId,
					ChangeCommit: record.Role.CHANGE,
					ifDco: record.Role.DCO,
				},
			})
			localStorage.setItem('ifchaning', true)
		},
		//终止
		async stop(record) {
			await dpiaChangeState({ Id: record.Id, DpiaStatus: 5 })
			this.getList()
			this.getAllList()
		},
		//子类
		async succeed() {
			let record = this.record1
			const arr = []
			// 当某一行展开时，关闭其他行
			this.expandedRowKeys = [record.Id]
			const { data } = await dpiaSimpleAction({
				...this.paginationActio,
				Id: record.Id,
			})
			// 解构赋值
			const { Page, PageSize, Total, Lists } = data
			// 给分页数据赋值
			this.paginationActio = {
				page: Page,
				pageSize: PageSize,
				total: Total,
			}
			this.riskList = Lists
		},
		async getRiskList(expanded, record) {
			console.log('record', record)
			// console.log("expanded", expanded);
			if (expanded) {
				this.record1 = record
				this.expanded1 = expanded
				const arr = []
				// 当某一行展开时，关闭其他行
				this.expandedRowKeys = [record.Id]
				const { data } = await dpiaSimpleAction({
					...this.paginationActio,
					Id: record.Id,
				})
				// 解构赋值
				const { Page, PageSize, Total, Lists } = data
				// 给分页数据赋值
				this.paginationActio = {
					page: Page,
					pageSize: PageSize,
					total: Total,
				}
				this.riskList = Lists
			} else {
				// 当某一行关闭时，清空展开行键列表
				// this.expandedRowKeys = [];
			}
		},
		// tabs
		callback(key) {
			this.keys = key
			this.current = key
		},
		// action 修改按钮
		async showModalAction(state, editId, mode, record) {
			if (state === '0') {
				//新建时获取actin ID
				const { data } = await ristCreateAction()
				//  console.log(data.ActionId);
				this.$refs.creatRiskAction.openAction(data)
			} else {
				//编辑
				try {
					// console.log(editId);
					const { data } = await RISKEditActionList({ Id: editId })
					//传值回显
					let allDetails = this.listData.filter((item) => {
						return (
							item.Id ===
							(mode === 'DPIA' ? record.DpiaQid : record.RiskId)
						)
					})[0]
					this.$refs.creatRiskAction.openAction(editId, data, 'see')
				} catch (error) {
					// 报错信息
					this.$message.error(error)
					console.log(error)
				} finally {
					// 不管成功失败都会执行
					this.listLoading = false
				}
			}
		},
		//删除action
		async delActions(id) {
			//调接口
			try {
				// 传过来的id直接请求删除api
				await rickActiondel({ Id: id })
				this.getRiskList(this.record1, this.expanded)
				this.$message.success(
					this.$t('user.verification-code.required111566110577133')
				)
			} catch (error) {
				this.$message.error(error)
			} finally {
			}
		},
	},
}
</script>
<style lang="less" scoped>
/deep/ .ant-table-thead {
	background: #f4f7ff;
	font-weight: 700;
}

.ant-pagination {
	float: right;
}

.Title {
	font-size: 36px;
	font-weight: 500;
	line-height: 42px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
}

.Title1 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
}

.Title2 {
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: 0em;
	text-align: left;
	margin-bottom: 10px;
	margin-left: 55px;
}

.card {
	display: flex;
	flex-direction: row;
	width: 60%;
	border: 1px solid #ccc;
	border-radius: 4px;
	height: 310px;
	margin: 15px 0;
}

.card_le {
	width: 18px;
	background: rgba(164, 201, 234, 1);
}

.card_ri {
	width: 100%;
	background: #fff;
}

.card_ri .Dpia {
	height: 44px;
	line-height: 44px;
	border-bottom: 1px solid #ccc;
	width: 100%;
	font-size: 20px;
	font-weight: 700;
	letter-spacing: 0em;
	text-align: left;
	padding-left: 15px;
}

.TotaNua {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 44px;
	color: #1890ff;
}

.Tota {
	display: flex;
	width: 100%;
	justify-content: center;
	font-size: 16px;
}

.Dra {
	display: flex;
	justify-content: space-around;
	flex-wrap: nowrap;
	margin-top: 33px;
	padding-bottom: 15px;
	border-bottom: 1px solid #ccc;
}

.Foos {
	font-size: 18px;
	cursor: pointer;
}

.Pa {
	height: 5px;
	width: 90px;
	background: #ccc;
	position: absolute;
	top: 0px;
	left: 50%;
	cursor: pointer;
}

.manipulate {
	position: absolute;
	right: 0;
	margin-top: -24px;
	background: rgba(255, 255, 255, 0.9);
	height: 46px;
	line-height: 49px;
}

.icon {
	font-size: 18px;
	margin: 0 40px;
	width: 30px;
	height: 30px;
	line-height: 30px;
	border-radius: 50%;
}

.icon:hover {
	background-color: #757575;
	border-radius: 50%;
	text-align: center;
	width: 30px;
	height: 30px;
	line-height: 30px;
}

.timeline-item-green {
	color: green;
}

.timeline-item-red {
	color: red;
}

.timeline-item-gray {
	color: gray;
}
.button-text {
	font-size: 14px;
	transition: color 0.3s;
	border-radius: 0;
	margin-right: 18px;
	border: 0;
	color: rgba(0, 0, 0, 0.65);
	width: 294px;

	&.active {
		border-bottom: 2px solid #5077a5;
		color: #5077a5;
	}

	&:hover {
		color: #5077a5;
		border-bottom: 2px solid #5077a5;
	}
}
</style>
